<section>
	<h1 class="blue" data-id="#angular"><i class="ace-icon fa fa-cog grey"></i> AngularJS</h1>

	<div class="hr hr-double hr32"></div>
	<div class="help-content">
		<h3 class="info-title smaller">Overview</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				AngularJS version of Ace depends on Angular UI Bootstrap, jQuery, Bootstrap and Ace's files.
			</li>
			
			<li>
				It's not a pure AngularJS implementation and except for some components, it's mostly composed of wrappers for jQuery plugins and Ace's elements.
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#angular.files">Angular Files</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				AngularJS files are inside <code>angular</code> folder.
			</li>
			
			<li>
				The entry HTML file is 
				<code data-open-file="html" class="open-file"><span class="brief-show">angular/</span>index.html</code>
				and main application file is
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/app.js</code>
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#anular.controllers">Controllers</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Main controller file is 
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/controllers/main.js</code>
				which contains 3 controllers:
				<ol>
					<li><code>MainController</code>: doesn't have much except for a few global variables, loading progressbar (spinner icon) and <code>getData</code> function as described in 'Data Files' section</li>
					
					<li><code>SettingsCtrl</code>: optional controller for responding to settings box changes</li>
					
					<li><code>SidebarCtrl</code>: optional controller that loads sidebar items from <code>$stateProvider</code> states defined inside <code data-open-file="javascript" class="open-file"><span class="brief-show">angular/js/</span>app.js</code></li>
				</ol>
				<br />
				And two optional services:
				<ol>
					<li><code>SidebarList</code>: converts <code>app.js</code> $stateProvider states to a list of sidebar items to be used in sidebar template</li>
					
					<li><code>StorageGet</code>: loads localStorage stored values, such as ace.settings, ace.sidebar, etc...</li>
				</ol>
			</li>

			<li>
				Each page's controller is inside <code>js/controllers/pages</code> folder.
				<br />
				For example 
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/js/controllers/pages/</span>dashboard.js</code>
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#angular.data">Data Files</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				In Ace's demo, some pages and the app in general may have data which is dynamically loaded via <code>getData</code> function in <code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/controllers/main.js</code>
				<br />
				For example in Dashboard, it is used to load <code data-open-file="json" class="open-file"><span class="brief-show">angular/data/pages/dashboard/</span>conversations.json</code>, etc:
<pre data-language="html">
<div ng-repeat="item in getData('conversations')" class="itemdiv dialogdiv">
 ...
</div>
</pre>
			</li>
			
			<li>
				You don't need this and you can organize and load data in anyway which is appropriate for your app
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#settings.breadcrumbs">Sidebar</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				If your sidebar list is static, you can place all your sidebar html in one file,
				but in Ace's demo it's a partial template which is rendered using <code data-open-file="javascript" class="open-file"><span class="brief-show">angular/js/</span>app.js</code> router states!
			</li>
			<li>
				The optional SidebarList service defined in <code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/controllers/main.js</code>
				converts those states to a list which is used by
				<br />
				<code data-open-file="html" class="open-file"><span class="brief-show">angular/views/layouts/default/partial/</span>sidebar.html</code>
				<br />
				and
				<code data-open-file="html" class="open-file"><span class="brief-show">angular/views/layouts/default/partial/sidebar/</span>item.html</code>
				<br />
				to render sidebar! 
			</li>
			
			<li>
				Sidebar options are defined inside 
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/controllers/main.js</code>
				<br />
				as <code>$scope.ace.sidebar</code> which includes:
				<ol>
					<li><code>minimized</code>: collapse/expand sidebar</li>
					<li><code>toggle</code>: toggle in/out sidebar in mobile mode</li>
					<li><code>reset</code>: reset sidebar scrollbars and submenu position</li>
				</ol>
			</li>
		 </ul>
		</div>
		
		
		<h3 class="info-title smaller" data-id="#settings.breadcrumbs">Settings</h3>
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Optional Settings. User options are saved in localStorage and retrieved later on reload!
			</li>
			<li>
				Options are defined inside 
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/controllers/main.js</code>
				<br />
				as <code>$scope.ace.settings</code>.
			</li>
		 </ul>
		</div>

	</div>
	
	
	
	<div class="hr hr-double hr32"></div>
	<h2 class="blue lighter help-title" data-id="#settings.page">
		Directives
	</h2>
	<div class="space-4"></div>

	<!-- #section:settings.page -->
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#settings.navbar">Ace Directives</h3>
		<!-- #section:settings.navbar -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				The following directives are wrappers for Ace's custom elements and are inside:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/directives/ace.js</code>
			</li>
			
			<li>
				For examples about directives, please see demo pages and controllers at <code>angular/js/controllers</code>
			</li>
		 
			<li>
				<code>ui-breadcrumb</code> is required for determining current active item and sidebar highlight.
				<br />
				If you don't need breadcrumbs, you may still use it but hide it!
<pre data-language="html">
 <ui-breadcrumb home="'fa fa-home'" ng-hide="true"></ui-breadcrumb>
</pre>
			</li>
			
			<li>
				<code>ace-scroll</code>: It's a wrapper for ace_scroll, so you can use the same options:
<pre data-language="html">
 <div class="dialogs" ace-scroll options="{'size': 300}">
  ...
 </div>
</pre>
			</li>
			
			<li>
				<code>widget-box</code>: Basically a wrapper for widget box and you can use scope variables to change its state.
				<br />
				Following optional variables are available:
				<ol>
					<li><code>wb-reloading</code>: Puts widget in loading state</li>
					<li><code>wb-fullscreen</code>: Toggles fullscreen mode on/off</li>
					<li><code>wb-closed</code>: If set to true widget box is removed</li>
					<li><code>wb-hidden</code>: If true, widget box becomes hidden</li>					
					<li><code>wb-toggle</code>: If true, widget box is shown otherwise hidden. Should be initialized with <b>!wbHidden</b> value</li>
					<li><code>save</code>: If true, widget box's state(collapsed or note) will be saved/restored using localStorage. Widget box should have an <code>id</code> attribute</li>
					<li><code>save-name</code>: Optional name used to save its state in localStorage.</li>
				</ol>
				
				<br />
				
				You can watch above variables for changes but 
				following callbacks are also available when clicking widget toolbar buttons:
				<ol>
					<li><code>on-reload</code></li>
					<li><code>on-close</code></li>
					<li><code>on-fullscreen</code></li>
					<li><code>on-show</code></li>					
					<li><code>on-hide</code></li>					
				</ol>
				
<pre data-language="html">
<div widget-box id="widget-1" class="widget-box" wb-reloading="is_reloading" wb-fullscreen="is_fullscreen" save="true" on-reload="on_reload_widget()">
  <widget-header wb-hidden='is_widget_hidden' toolbar="{'reload': true, 'close': true, 'toggle': true, 'fullscreen': true}">Widget Box Title</widget-header>
  
  <div class="widget-body"><div class="widget-main">
    ...
  </div></div>
</div>
</pre>

And inside controller:
<pre data-language="javascript">
$scope.is_reloading = false;
$scope.on_reload_widget = function() {
  //after content is loaded
  //$scope.is_reloading = false;
}
</pre>
			</li>
			
			<li>
				<code>widget-header</code>: widget box's header.
				<br />
				Following optional variables are available:
				<ol>
					<li><code>toolbar</code>: Specify what buttons should be used in toolbar</li>
					<li><code>toggle-icon-down &amp; toggle-icon-up</code>: Optional toggle icons</li>
					<li><code>wb-hidden</code>: You should use the same wbHidden variable used for widget box!</li>
				</ol>
				
<pre data-language="html">
  <widget-header wb-hidden='is_widget_hidden' toggle-icon-down="'fa fa-chevron-down'" toggle-icon-down="'fa fa-chevron-up'" toolbar="{'reload': true, 'close': true, 'toggle': true, 'fullscreen': true}">Widget Box Title</widget-header>
</pre>
			</li>
			
			<li>
				<code>ace-colorpicker</code> is a directive for colorpicker element:
<pre data-language="html">
<div ace-colorpicker colors='widgetColors' options="widgetColorpicker" ng-model="widgetColor" ng-value="widgetColorClass"></div>
</pre>
			Following variables are available:
			<ol>
				<li><code>colors</code>: A list of colors with optional values to be used</li>
				<li><code>options</code>: Options are <b>pull_right</b> and <b>caret</b></li>
				<li><code>add-new</code>: If true and ngModel is assigned a new color value, it will be added to our list. Default is false</li>
				<li><code>ng-value</code>: In your list you can specify a value for each color, and ngValue will be updated according to selected color</li>
			</ol>
<pre data-language="javascript">
$scope.widgetColors = {
  '#307ECC': 'blue', '#5090C1': 'blue2', '#6379AA': 'blue3'
};
</pre>

			</li>
			
			<li>
				<code>ace-fileinput</code> is a wrapper for Ace's file input element:
				<br />
				Following variables and callbacks are available:
				<ol>
					<li><code>options</code>: file input options</li>
					<li><code>props</code>: properties such as 'loading', 'enabled', 'reset_button'</li>
					<li><code>file-list</code>: list of file names to display on intial display of file input</li>
					<li><code>on-change</code>: when file selection is changed</li>
					<li><code>on-error</code>: when there is an error</li>
					<li><code>on-preview</code>: when preview is ready</li>					
				</ol>
<pre data-language="html">
<input type="file" ace-fileinput ng-model="files1" options="fileInputOptions1" props="fileInputProps1" />
</pre>

<pre data-language="javascript">
$scope.files1 = null;//it will contain a list of File objects when selection changes
$scope.fileInputProps1 = {
   'loading': false,
   'enabled': true,
   'reset_button': true
};
</pre>
			Note that you can reset file input when you set the model to null:
<pre data-language="javascript">
$scope.resetFile = function() {
    $scope.files1 = null;
}
</pre>
			
			</li>
			
			<li>
				<code>ace-sidebar</code> enables sidebar functions such as scroll bar and hover menu.
				<br />
				Following variables are available:
				<ol>
					<li><code>options</code>: same as ace_sidebar options</li>
					<li><code>props</code>: properties such as 'minimized' &amp; 'toggle'(used in mobile menu)</li>
					<li><code>scroll</code>: set true or an object like <a href="#basics/sidebar.functions">ace_sidebar_scroll</a> options to enable sidebar scroll</li>
					<li><code>hover</code>: set true or an object like <a href="#basics/sidebar.functions">ace_sidebar_hover</a> options to enable sidebar hover</li>
				</ol>
<pre data-language="html">
 <div id="sidebar" class="sidebar responsive" ng-controller="SidebarCtrl" ace-sidebar props="ace.sidebar" scroll="true" hover="true" ng-include="...">
  
 </div>
</pre>
			</li>			
		 </ul>
		</div>
		<!-- /section:settings.navbar -->
		
	
		<h3 class="info-title smaller" data-id="#settings.breadcrumbs">Vendor Directives</h3>
		<!-- #section:settings.breadcrumbs -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				The following directives are wrappers for third party plugins and are inside:
				<br />
				<code data-open-file="javascript" class="open-file"><span class="brief-show">angular/</span>js/directives/vendor.js</code>
			</li>
			
			<li>
				Options are passed via <code>options</code> variable.
			</li>
		 
			<li>
				<code>sparkline</code>: <a href="#plugins/charts.sparkline">jQuery Spakline</a>
			</li>
			
			<li>
				<code>prettify</code>: <a href="#plugins/misc.prettify">Google Code Prettify</a>
				<br />
				Following variables are available:
				<ol>
					<li><code>lang</code></li>
					<li><code>linenums</code></li>
				</ol>
			</li>
			
			<li>
				<code>input-limiter</code>: <a href="#plugins/input.limiter">Input Limiter</a>
			</li>
			
			<li>
				<code>fx-spinner</code>: <a href="#plugins/fuelux.spinner">FuelUX Spinbox</a>
			</li>
			
			<li>
				<code>bs-datepicker</code>: <a href="#plugins/date-time.datepicker">Bootstrap Datepicker</a>
			</li>
			
			<li>
				<code>bs-timepicker</code>: <a href="#plugins/date-time.timepicker">Bootstrap Timepicker</a>
			</li>
			
			<li>
				<code>date-timepicker</code>: <a href="#plugins/date-time.datetimepicker">Bootstrap DateTimepicker</a>
			</li>
			
			<li>
				<code>bs-wysiwyg</code>: <a href="#plugins/editor.wysiwyg">Bootstrap Wysiwyg</a>
				<br />
				Note that you can also use other AngularJS wysiwyg plugins in your app
			</li>
			
			<li>
				<code>bs-markdown</code>: <a href="#plugins/editor.markdown">Markdown Editor</a>
			</li>
			
			<li>
				<code>x-editable</code>: <a href="#plugins/misc.inline-editable">Inline Editable</a>
			</li>
			
			<li>
				<code>jq-sortable</code>: Wrapper for <a href="#plugins/jquery.ui">jQuery UI</a> Sortable with following extra options:
				<ol>
					<li><code>target</code> the elements for which you want to enable sortable feature</li>
					<li><code>save</code> whether you want to save order of elements in localStorage and restore later</li>
					<li><code>save-name</code> optional name used to save info in localStorage</li>
				</ol>
				
<pre data-language="html">
<div jq-sortable options="sortableOpts" connect-with="'.widget-container-col'" target="'.widget-container-col'" save="true">
  <!-- widgets here -->
</div>
</pre>
			</li>
		 </ul>
		</div>
		<!-- /section:settings.breadcrumbs -->


		<h3 class="info-title smaller" data-id="#settings.container">Other directives</h3>
		<!-- #section:settings.container -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Other directives are located inside their own separate folder
			</li>
			
			<li>
				You can find a list of them in the <a href="#plugins/angular">Angular Plugins</a> section
			</li>
		 </ul>
		</div>
		<!-- /section:settings.container -->

	</div>


</section>
